<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <el-container>
    <el-header style="background-color: #8B4513">
      <h1 style="color: white;font-size: 22px">
        StarPetHouse宠屋后台管理系统
        <span style="float: right">
          欢迎{{user.nickname}}回来
          <a href="javascript:void(0)" @click="logout()">退出登录</a>
        </span>
      </h1>
    </el-header>
    <el-container>
      <el-aside width="200px" style="overflow: hidden">
        <el-menu @select="handleSelect">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-user-solid"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item index="1-1">用户列表</el-menu-item>
            <el-menu-item index="1-2">添加用户</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-s-shop"></i>
              <span>商品管理</span>
            </template>
            <el-menu-item index="2-1">商品列表</el-menu-item>
            <el-menu-item index="2-2">添加商品</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-shopping-cart-2"></i>
              <span>订单管理</span>
            </template>
            <el-menu-item index="3-1">订单列表</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title"><i class="el-icon-pie-chart"></i>
              <span>数据统计</span>
            </template>
            <el-menu-item index="4-1">订单列表</el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title"><i class="el-icon-star-on"></i>
              <span>宠物状态管理管理</span>
            </template>
            <el-menu-item index="5-1">宠物状态列表</el-menu-item>
            <el-menu-item index="5-2">添加宠物</el-menu-item>
          </el-submenu>
        </el-menu>

      </el-aside>
      <el-main>
        <!--用户表格开始-->
        <el-table v-if="currentIndex=='1-1'" :data="categoryArr">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="用户名称" prop="name"></el-table-column>
          <el-table-column label="用户会员" prop="member"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                      size="mini"
                      type="success"
                      @click="handleCategoryUpdate(scope.$index, scope.row)">修改</el-button>
              <el-button
                      size="mini"
                      type="danger"
                      @click="handleCategoryDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--用户表格结束-->
        <!--商品表格开始-->
        <el-table v-if="currentIndex=='2-1'" :data="productArr">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="商品图片" width="100px">
            <template slot-scope="scope">
              <img :src="scope.row.url" width="100%">
            </template>
          </el-table-column>
          <el-table-column label="商品标题" prop="title"></el-table-column>
          <el-table-column label="商品价格" prop="price"></el-table-column>
          <el-table-column label="商品原价" prop="oldPrice"></el-table-column>
          <el-table-column label="商品库存" prop="num"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                      size="mini"
                      type="success"
                      @click="handleProductUpdate(scope.$index, scope.row)">修改</el-button>
              <el-button
                      size="mini"
                      type="danger"
                      @click="handleProductDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--商品表格结束-->
        <!--订单表格开始-->
        <el-table v-if="currentIndex=='3-1'" :data="orderArr">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="订单图片" width="100px">
            <template slot-scope="scope">
              <img :src="scope.row.url" width="100%">
            </template>
          </el-table-column>
          <el-table-column label="订单名称" prop="title"></el-table-column>
          <el-table-column label="订单价格" prop="price"></el-table-column>
          <el-table-column label="订单状态" prop="orderStatus"></el-table-column>
          <el-table-column label="下单时间" prop="created"></el-table-column>
          <el-table-column label="顾客备注" prop="remarks"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                      size="mini"
                      type="success"
                      @click="handleOrderUpdate(scope.$index, scope.row)">修改</el-button>
              <el-button
                      size="mini"
                      type="danger"
                      @click="handleOrderDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--订单表格结束-->
        <!--数据表格开始-->
        <el-table v-if="currentIndex=='4-1'" :data="orderArr">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="订单图片" width="100px">
            <template slot-scope="scope">
              <img :src="scope.row.url" width="100%">
            </template>
          </el-table-column>
          <el-table-column label="订单名称" prop="title"></el-table-column>
          <el-table-column label="订单价格" prop="price"></el-table-column>
          <el-table-column label="订单状态" prop="orderStatus"></el-table-column>
          <el-table-column label="下单时间" prop="created"></el-table-column>
          <el-table-column label="顾客备注" prop="remarks"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                      size="mini"
                      type="success"
                      @click="handleOrderUpdate(scope.$index, scope.row)">修改</el-button>
              <el-button
                      size="mini"
                      type="danger"
                      @click="handleOrderDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--数据表格结束-->
        <!--宠物状态表格开始-->
        <el-table v-if="currentIndex=='5-1'" :data="stateArr">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="宠物类型" prop="type"></el-table-column>
          <el-table-column label="宠物名称" prop="title"></el-table-column>
          <el-table-column label="宠物状态" prop="state"></el-table-column>
          <el-table-column label="治疗情况" prop="situation"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                      size="mini"
                      type="success"
                      @click="handleStateUpdate(scope.$index, scope.row)">修改</el-button>
              <el-button
                      size="mini"
                      type="danger"
                      @click="handleStateDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--宠物状态表格结束-->
      </el-main>
    </el-container>
  </el-container>

</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
 let v = new Vue({
    el: '#app',
    data: function() {
      return {
        currentIndex:"1-1",
        productArr:[],
        categoryArr:[],
        orderArr:[],
        stateArr:[],
        user:{}
      }
    },
   methods:{
      logout(){
        if (confirm("您确定退出登录吗?")){
          axios.get("/logout").then(function () {
            location.href="/login.html";//显示首页
          })
        }
      },
     handleStateUpdate(i,p){
       location.href="/updateState.html?id="+p.id;
     },
     handleProductUpdate(i,p){
       location.href="/updateProduct.html?id="+p.id;
     },
     handleOrderUpdate(i,b){
       //跳转到修改页面
       location.href="/updateOrder.html?id="+b.id;
     },
      handleCategoryUpdate(i,c){
        let name = prompt("请输入新的用户名称");
        if (name==null){
          return;
        }
        if (name.trim()==""){
          v.$message.error("请输入用户名称!");
          return;
        }
        //发出修改的异步请求
        axios.post("/category/update",{id:c.id,name:name}).then(function () {
          c.name=name; //让表格内容跟着改变
        })
      },
     handleSelect(key,keyPath){
       //key就是导航菜单项的index的值
       if (key=='1-2'){
         let name = prompt("请输入用户的名称")
         if (name==null){//代表用户取消了操作
           return;
         }
       if (name.trim()==""){
         v.$message.error("请输入用户名称!")
         return;
       }
       //发出添加分类的请求
         axios.post("/category/insert?name="+name).then(function () {
           location.reload();
         })
       }else if(key=='2-2'){
         location.href="insertProduct.html";
       }else if(key=='5-2'){
         location.href="insertState.html";
       }else{//1-1 , 2-1, 3-1
         v.currentIndex = key;
       }
     },
     handleStateDelete(i,c){
       if (confirm("您确定删除此宠物吗?")){
         axios.post("/state/delete?id="+c.id).then(function () {
           v.stateArr.splice(i,1);
           v.$message.success("成功删除了"+c.name);
         })
       }
     },
     handleCategoryDelete(i,c){
       if (confirm("您确定删除此用户吗?")){
         axios.post("/category/delete?id="+c.id).then(function () {
           v.categoryArr.splice(i,1);
           v.$message.success("成功删除了"+c.name);
         })
       }
     },
     handleOrderDelete(i,b){
        if (confirm("您确认删除此订单吗?")){
          axios.post("/order/delete?id="+b.id).then(function () {
            v.orderArr.splice(i,1);
            v.$message.success("成功删除了订单");
          })
        }
     },
     handleProductDelete(i,p){
       if (confirm("您确认删除此商品吗?")){
         axios.post("/product/delete?id="+p.id).then(function () {
           v.productArr.splice(i,1);
           v.$message.success("成功删除了"+p.title);
         })
       }
     }
   },
   created:function () {
      //获取当前登录的用户对象
     axios.get("/currentUser").then(function (response) {
       if (response.data==""){
         alert("请先登录!");
         location.href="/login.html";
       }else {
         v.user = response.data;
       }
     })
      //获取所有商品数据
     axios.get("/product/select").then(function (response) {
       v.productArr = response.data;
     })
      //获取所有订单数据
     axios.get("/order/select").then(function (response) {
       v.orderArr = response.data;
     })
      //获取所有用户数据
      axios.get("/category/select").then(function (response) {
        v.categoryArr = response.data;
      })
     //获取所有宠物状态数据
     axios.get("/state/select").then(function (response) {
       v.stateArr = response.data;
     })
   }
  })
</script>
</html>